import React, {Component} from 'react'
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Dimensions,
  ActivityIndicator, Image
} from 'react-native'
import {Toast, Overlay, Input} from 'teaset'
import font from './../../styles/font'
import {Actions} from "react-native-router-flux";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import ICON from "react-native-vector-icons/Ionicons";

const {
  height: deviceHeight,
  width: deviceWidth
} = Dimensions.get("window");

class UserPriceScene extends Component{
  constructor(props) {
    super(props)
    this.state = {
      price: 0,
      canPrice: 0
    }
  }

  componentDidMount() {
    this.props.actions.userInfo()
  }


  componentWillReceiveProps(nextProps) {
    const {userInfo, priceExtract} = nextProps
    console.log(priceExtract)
    if(this.props.userInfo !== userInfo){
      if (userInfo.error !== false) {
        Actions.login()
      }else{
        if(this.props.userInfo.data && !this.props.userInfo.isLoading){
          this.setState({
            canPrice: (this.props.userInfo.data.jifen / 10).toFixed(2)
          })
        }
      }


    }


    if(this.props.priceExtract !== priceExtract){
      if (priceExtract.error !== false) {
        if (priceExtract.error.status === 401) {
          Actions.login()
          return;
        }



        if (priceExtract.error.message === '用户还没关注') {
          Overlay.show(<Overlay.PopView
            style={{alignItems: 'center', justifyContent: 'center'}}
            ref={v => this.signPopView = v}
          >
            <View style={{minWidth: 260, minHeight: 180, justifyContent: 'center', alignItems: 'center', paddingTop: 15}}>
              <Text style={{backgroundColor:'#e64340', width:250, textAlign: 'center', height:40, lineHeight:40, fontSize:16, color:'#fff',textAlignVertical:'center'}}>提现还差一步哦~</Text>
              <Text style={{backgroundColor:'#fff', width:250, textAlign: 'center', lineHeight:30, fontSize:14,textAlignVertical:'center'}}>请截屏后打开微信</Text>
              <Text style={{backgroundColor:'#fff', width:250, textAlign: 'center',  fontSize:14,textAlignVertical:'center'}}>识别二维码关注：发现极品</Text>
              <Image source={{uri:'https://tao.vyxjj.com/build/images/faxian.jpg'}} style={{width:250, height:250,
                marginBottom:10
              }}/>
              <ICON name="ios-close-circle-outline" color="#fff" size={35} onPress={()=>{
                this.signPopView && this.signPopView.close()}}/>
            </View>
          </Overlay.PopView>);
          // Toast.message('提现还差一步哦~请关注公众号', {duration:'long'}, {position:'center'})
          return;
        }

        if (priceExtract.error.message === '提现日为每周二、五提现额度不限。') {
          Toast.fail(priceExtract.error.message)
          return;
        }

        Toast.fail(priceExtract.error.message)
        Actions.UserDate({...this.props.userInfo.data})
      } else {
        if (priceExtract.data && !priceExtract.isLoading) {
          this.setState({'price': 0})
          Toast.success(priceExtract.data)
          this.props.actions.userInfo()
        }
      }
    }
  }

  _submit(){
    this.customPopView && this.customPopView.close()
    this.props.actions.priceExtract({price: this.state.price})
  }


  renderSubmitOverlay(){
    return(
      <Overlay.PopView
        style={{alignItems: 'center', paddingTop:80}}
        ref={v => this.customPopView = v}
      >
        <View style={styles.overlayContainer}>
          <Text style={[font.black18, {marginTop:20, marginBottom:5}]}>积分提现</Text>
          <Text style={{fontSize:14, color:'#999'}}>您可以提现的金额是￥{this.state.canPrice}</Text>
          <Input
            keyboardType='numeric' style={{width: 180, marginVertical:10}}
            onChangeText={(data)=>{this.setState({price: data})}}
          />
          <View style={styles.button}>
            <TouchableOpacity style={[styles.buttonItem]} onPress={()=>{
              this.customPopView && this.customPopView.close()
            }}>
              <Text style={{color:'#5f646e'}}>取消</Text>
            </TouchableOpacity>
            <View style={{height:40, borderLeftWidth: 0.3,borderLeftColor:'#d5d5d6'}}></View>
            <TouchableOpacity style={styles.buttonItem} onPress={()=>{
              this._submit()
            }}>
              <Text style={{color:'#3cc51f'}}>确定</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Overlay.PopView>
    )
  }


  render(){
    const {data, meta, isLoading} = this.props.userInfo
    if(data && !isLoading){
      return(
        <KeyboardAwareScrollView style={styles.container}>
          <Text style={styles.title}>提现日为每周二、周五，提现额度不限。</Text>
          <View style={styles.content}>
            <View style={styles.contentItem}>
              <Text style={font.black16}>总积分</Text>
              <Text style={{fontSize:16, color:'#999'}}>{data.jifen}</Text>
            </View>
            <View style={styles.contentItem}>
              <Text style={font.black16}>合计收入</Text>
              <Text style={{fontSize:16, color:'#999'}}>￥<Text style={{fontSize:16, color:'#f00'}}>{(data.jifen / 10).toFixed(2)}</Text>元</Text>
            </View>
            <View style={[styles.contentItem, {flexDirection:'column', borderBottomWidth:0, justifyContent:'center',
              alignItems:'flex-start', height:60
            }]}>
              <Text style={font.black16}>积分汇率：</Text>
              <Text style={{fontSize:16, color:'#f00'}}>1元=10积分</Text>
            </View>
          </View>

          {meta.dt !== 2 || meta.dt !== 5 ?
              <TouchableOpacity style={[styles.submit, {backgroundColor:'#ccc'}]} disabled={true} >
                <Text style={font.white14}>立即提现</Text>
              </TouchableOpacity>
           :
            <TouchableOpacity style={styles.submit} onPress={()=>{
              Overlay.show(this.renderSubmitOverlay())
            }}>
              <Text style={font.white14}>立即提现</Text>
            </TouchableOpacity>
          }

        </KeyboardAwareScrollView>
      )
    }else{
     return(
       <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
         <ActivityIndicator
           animating={true}
           size='large'
         />
       </View>
     )
    }
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#fff'
  },
  title:{
    color:'#999',
    fontSize:13,
    padding:10,
  },
  submit:{
    marginVertical:15,
    backgroundColor:'#f00',
    borderRadius:5,
    justifyContent:'center',
    alignItems:'center',
    height:40,
    margin:10
  },
  item:{
    marginVertical:15,
    borderBottomColor:'#999',
    borderBottomWidth:0.3,
    paddingBottom:10
  },
  overlayContainer:{
    width: deviceWidth * 0.8,
    maxWidth: 300,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'#fff',
    borderRadius:5,
    height:160
  },
  button:{
    borderTopWidth:0.3,
    borderTopColor:'#d5d5d6',
    flex:1,
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center',
    height:40,
  },
  buttonItem:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    height:40,
  },
  content:{
    borderTopColor:'#e5e5e5',
    borderTopWidth:0.3,
    borderBottomColor:'#e5e5e5',
    borderBottomWidth:0.3,
    marginTop:5,
    paddingHorizontal:10,
  },
  contentItem:{
    justifyContent:'space-between',
    alignItems:'center',
    flexDirection:'row',
    height:40,
    borderBottomColor:'#e5e5e5',
    borderBottomWidth:0.3
  }
})

export const LayoutComponent = UserPriceScene

export function mapStateToProps(state, props) {
  return {
    routes: state.routes,
    userInfo: state.userInfoReducer,
    priceExtract: state.priceExtractReducer
  }
}